<template>
  <div class="echartsPage">
    <div id="main"></div>
  </div>
</template>

<script setup>
import { useGlobal } from '@/hooks/system/useGlobal'
const { $nextTick } = useGlobal()

const Data = [
  {
    name: '国家级示范社',
    value: '11',
    code: 'nation',
  },
  {
    name: '省级示范社',
    value: '20',
    code: 'province',
  },
  {
    name: '市级示范社',
    value: '11',
    code: 'city',
  },
  {
    name: '县级示范社',
    value: '14',
    code: 'county',
  },
  {
    name: '非示范社',
    value: '15',
    code: 'notsfs',
  },
]
const sum = 71

const option = {
  title: {
    text: '大标题',
    subtext: '小标题',
    left: 'center',
    top: 20,
  },
  color: ['#046DD8', '#a80fa1', '#1EBEDB', '#1BB513', '#FECF2E', '#4FB1A1'],
  tooltip: {
    trigger: 'item',
  },
  legend: {
    bottom: 20,
  },
  series: [
    {
      type: 'pie',
      name: '外圈',
      roseType: 'radius', // area 所有扇区圆心角相同
      itemStyle: {
        labelLine: {
          length: 2,
        },
        borderWidth: 2,
        borderRadius: 0,
        borderColor: '#fff',
      },
      radius: ['30%', '50%'],
      center: ['50%', '50%'],
      // 饼图图形上的文本标签
      label: {
        position: 'outside', // 文本标签在饼图扇区外侧
        formatter: '{b}{c}', // 设置标签格式
      },
      // 高亮状态的扇区和标签样式
      // emphasis: {
      //   label: {
      //     show: true,
      //   },
      // },
      data: Data,
    },
    {
      name: '内圈',
      type: 'pie',
      clockWise: false, // 顺时加载
      hoverAnimation: false, // 鼠标移入变大
      center: ['50%', '50%'],
      radius: '25%',
      // 饼图图形上的文本标签
      label: {
        show: true,
        position: 'center',
        color: '#4c4a4a',
        formatter() {
          return `合计\n${sum}个`
        },
      },
      data: [
        {
          value: sum,
          name: '',
          itemStyle: {
            normal: {
              color: '#e7e7e7',
              borderColor: '#e7e7e7',
            },
          },
        },
      ],
    },
  ],
}

$nextTick(() => {
  const chartDom = document.getElementById('main')
  const myChart = echarts.init(chartDom)
  option && myChart.setOption(option)
})
</script>

<style scoped>
.echartsPage {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f1f1f1;
}
#main {
  margin: 0 auto;
  border: 1px solid #c7c7c7;
  width: 800px;
  height: 50%;
  background-color: #fff;
}
</style>
